	<template>
		<view class="container">
			<!-- 参考页面的卡片外层包裹样式 -->
			<view v-for="(card, index) in cardList" style="padding: 5rpx; background-color: #eee; margin-bottom: 10rpx;">
				<CardViewText 
					:key="index"
					:title="card.title"
					:isTop="card.isTop"
					:author="card.author"
					:comments="card.comments"
					:time="card.time"
					:cardType="card.cardType"
					:image="card.image"
					:images="card.images"
					:adTag="card.adTag"
					:adInfo="card.adInfo"
					:showSearch="card.showSearch"
					:bgColor="card.bgColor || '#fff'"
				>
					<!-- 启用插槽，参考页面的搜索插槽内容 -->
					<template v-slot:tips>
						<view class="slotcontent">
							<text>搜索：</text>
							<view class="borderbox"><text>今日头条</text></view>
							<view class="borderbox"><text>精选好物</text></view>
						</view>
					</template>
				</CardViewText>
			</view>
		</view>
	</template>

	<script>
		import CardViewText from '@/components/cardViewText.vue'
		export default {
			components: {
				CardViewText
			},
			data() {
				return {
					cardList: [
						{
							title: "乘势而上，续写中国奇迹新篇章—党的二十届四中全会侧记",
							isTop: true,
							author: "新华社",
							comments: 56,
							time: "2025.10.25",
							cardType: "text", // 纯文字类型
							showSearch: false
						},
						{
							title: "科技创新引领高质量发展新篇章",
							isTop: false,
							author: "人民日报",
							comments: 23,
							time: "2025.10.24",
							cardType: "image",
							image: "/static/news-img1.jpg", // 单张图片
							showSearch: false
						},
						{
							title: "全面推进乡村振兴，建设美丽宜居乡村",
							isTop: false,
							author: "央视新闻",
							comments: 89,
							time: "2025.10.23",
							cardType: "ad", // 广告类型
							adTag: "广告 新闻",
							adInfo: "热点聚焦",
							images: [
								"/static/news-img1.jpg",
								"/static/news-img2.jpg",
								"/static/news-img1.jpg"
							],
							showSearch: false
						},
						{
							title: "数字经济成为经济增长新引擎",
							isTop: false,
							author: "经济日报",
							comments: 34,
							time: "2025.10.22",
							cardType: "text-special",
							showSearch: true // 显示搜索插槽
						},
						{
							title: "绿色发展理念深入人心，生态文明建设成效显著",
							isTop: true,
							author: "光明日报",
							comments: 67,
							time: "2025.10.21",
							cardType: "image", 
							image: "/static/news-img2.jpg",
							showSearch: true
						}
					]
				}
			},
			methods: {},
			computed: {}
		}
	</script>

	<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx 0;
	}

	/* 参考页面的插槽样式 */
	.slotcontent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		padding-left: 10rpx;
		color: #aaf;
		font-size: 20rpx;
		margin-top: 15rpx;
	}

	.borderbox {
		margin: 0 10rpx;
		border-radius: 20rpx;
		border: 1rpx solid #aaf;
		padding: 5rpx 15rpx;
	}

	.borderbox text {
		color: #666;
		font-size: 22rpx;
	}
	</style>